/*
 * @Description: 媒体信息分组组件
 * @Author: Rfan
 * @Date: 2022-09-24 10:17:01
 * @LastEditTime: 2022-09-24 10:49:23
 */

import { useEffect, useState } from 'react';
import classNames from 'classnames/bind';
import { IMediaBaseInfo, IMediaGroupInfo } from '@/components/Preview/components/MediaInfo/index';
import MediaBaseInfo from '@/components/Preview/components/MediaInfo/MediaBaseInfo';
import styles from '../../styles/mediaInfo.module.scss';

const cx = classNames.bind(styles);

export interface IMediaGroupInfoProps {
  data: IMediaGroupInfo;
}
/* 媒体信息窗口 */
const MediaGroupInfo = (props: IMediaGroupInfoProps) => {
  const { data } = props;

  // Object.entries方法转换后的信息数组
  const [mediaInfoArr, setMediaInfoArr] = useState<[string, IMediaBaseInfo][]>(null);

  useEffect(() => {
    if (data) {
      setMediaInfoArr(Object.entries<IMediaBaseInfo>(data));
    }
  }, [data]);

  return (
    <div className={cx('media__group')}>
      {mediaInfoArr &&
        mediaInfoArr.map(([key, val]) => (
          <div className={cx('group__item')} key={key}>
            <div className={cx('group-title')}>{key}</div>
            <MediaBaseInfo data={val} />
          </div>
        ))}
    </div>
  );
};
export default MediaGroupInfo;
